.page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--themeBgColor);

    .nav {
        width: 100vw;
        background-color: #fff;
    }
}

.header-box {
    width: 100vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .header {
        height: 17vh;
        width: 700rpx;
        background-color: #fff;
        border-radius: 15rpx;

        .top {
            position: relative;
            height: 6vh;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .pjt {
                font-weight: 600;
                color: #3b3b3b;
                margin-left: 30rpx;
                display: flex;
                align-items: center;

                .txt {
                    font-size: 46rpx;
                    color: #726f6f;
                    font-weight: 600;
                    margin-right: 6rpx;
                }

                .name {
                    width: 450rpx;
                    font-weight: 600;
                    color: #464646;
                    font-size: 30rpx;
                    margin-right: 10rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .toggle {
                font-size: 30rpx;
                color: #6e655c;
                line-height: 6vh;
                margin-right: 30rpx;
                display: flex;
                align-items: center;

                .icon-smartliebiaoqiehuan {
                    font-size: 46rpx;
                    color: #333333;
                    font-weight: 600;
                    margin-right: 6rpx;
                }
            }

            .divider {
                position: absolute;
                bottom: 0;
                left: 20rpx;
                width: 660rpx;
                height: 1rpx;
                background-color: #f2f2f2;
            }
        }

        .bottom {
            height: 11vh;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .item {
                width: 23%;
                font-size: 24rpx;
                color: #666666;
                display: flex;
                flex-direction: column;
                align-items: center;

                .count {
                    font-size: 50rpx;
                    color: #8d83f1;
                    font-weight: 700;
                    margin-bottom: 5rpx;
                }

                .add {
                    width: 70rpx;
                    height: 70rpx;
                    font-size: 38rpx;
                    color: #fff;
                    background-color: #7367f0;
                    border-radius: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }


        }
    }
}

.content-box {
    width: 100vw;
    background-color: var(--themeBgColor);
    display: flex;
    flex-direction: column;
    align-items: center;

    .search {
        height: 100rpx;
        width: 700rpx;
        display: flex;
        justify-content: space-between;
        box-shadow: 1rpx 1rpx 5rpx 0 #f5f5f5;
        z-index: 1;

        .left {
            height: 80rpx;
            display: flex;
            align-items: center;
            background-color: var(--themeBgColor);

            .input {
                width: 480rpx;
                background-color: #fff;
                border-radius: 15rpx;
            }

            .search-icon {
                width: 80rpx;
                height: 34px;
                font-size: 46rpx;
                background-color: rgb(255, 255, 255);
                border-radius: 0 20rpx 20rpx 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .van-search {
                padding: 0rpx;
                background-color: var(--themeBgColor) !important;
            }

            .van-search__content {
                padding-left: 20rpx;
                background-color: #fff;
            }

            .van-search__action {
                padding: 0;
            }

            .van-search__content--round {
                border-radius: 20rpx 0 0 20rpx;
            }

        }

        .right {
            position: relative;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            color: #676767;
            display: flex;
            align-items: center;

            .icon-smartshaixuan1 {
                font-size: 42rpx;
                color: #7e7e7e;
                margin-right: 6rpx;
            }

            .circle {
                position: absolute;
                top: 16rpx;
                right: 8rpx;
                width: 15rpx;
                height: 15rpx;
                border-radius: 999rpx;
                background-color: #f51717;
            }
        }
    }

    .content {
        width: 100vw;
        background-color: var(--themeBgColor);

        .list {
            width: 100vw;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .item {
                position: relative;
                width: 700rpx;
                width: 700rpx;
                background-color: #fff;
                border-radius: 20rpx;
                margin-bottom: 20rpx;

                &:first-child {
                    margin-top: 10rpx;
                }

                .device-info {
                    padding: 25rpx 0;
                    border-bottom: 1rpx solid #f2f2f2;
                    display: flex;
                    justify-content: space-between;


                    .type {
                        margin-left: 30rpx;
                    }

                    .info {
                        color: #aaa9a6;
                        font-size: 28rpx;
                        margin-right: 30rpx;
                        display: flex;
                        align-items: center;

                        .battery-box {
                            display: flex;

                            .battery {
                                margin-right: 5rpx;
                                display: flex;
                                align-items: center;

                                .box {
                                    position: relative;
                                    width: 40rpx;
                                    height: 22rpx;
                                    border: 1rpx solid #44d4b6;
                                    border-radius: 6rpx;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    .count {
                                        position: absolute;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                        font-size: 18rpx;
                                        text-align: center;
                                        line-height: 22rpx;
                                        color: #474747;
                                    }

                                    .value-box {
                                        height: 18rpx;
                                        width: 36rpx;
                                        font-size: 18rpx;
                                        color: #4b4a4a;
                                        border-radius: 3rpx;
                                        display: flex;
                                        align-items: center;

                                        .value {
                                            height: 100%;
                                            width: 100%;
                                            background-color: #44d4b6;
                                            border-radius: 3rpx;
                                        }
                                    }
                                }

                                .cap {
                                    width: 5rpx;
                                    height: 15rpx;
                                    border-radius: 1rpx;
                                    margin-left: 2rpx;
                                    background-color: #44d4b6;
                                }
                            }
                        }

                        .status,
                        .online {
                            margin-left: 40rpx;

                            .status1,
                            .status2,
                            .online1,
                            .online2 {
                                font-size: 26rpx;
                                display: flex;
                                align-items: center;

                                .txt {
                                    font-size: 28rpx;
                                    margin-right: 6rpx;
                                }

                                .txt1 {
                                    font-size: 38rpx;
                                    margin-right: 4rpx;
                                }

                                .icon-smarttabtubiao-1 {
                                    color: #ee0a24;
                                }

                                .icon-smarttabtubiao- {}

                                .circle,
                                .circle1 {
                                    width: 15rpx;
                                    height: 15rpx;
                                    margin-right: 6rpx;
                                    background-color: #41d4b5;
                                    border-radius: 100%;
                                }

                                .circle {
                                    background-color: #f66968;
                                }
                            }
                        }
                    }
                }

                .person-info {
                    padding: 70rpx 0;
                    display: flex;

                    .image {
                        width: 100rpx;
                        height: 100rpx;
                        margin-left: 30rpx;

                    }

                    .person {
                        color: #333;
                        margin-right: 40rpx;
                        margin-left: 30rpx;
                        display: flex;
                        flex-direction: column;

                        .imei {
                            margin-bottom: 10rpx;
                            display: flex;
                            align-items: center;

                            .icon-smartcopy {
                                font-size: 28rpx;
                                color: #666;
                                margin-left: 15rpx;
                            }
                        }
                    }
                }

                .delete {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #aea5a5;
                    width: 90rpx;
                    height: 90rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}

// 园区弹窗切换开始
.park-box {
    width: 100vw;
    height: 70vh;
    background-color: rgb(255, 255, 255);

    .park-header {
        position: relative;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        box-shadow: 1rpx 1rpx 10rpx 0 #f5f5f5;
        z-index: 1;

        .left,
        .middle,
        .right {
            font-size: 32rpx;
            color: #7367f0;
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .left {
            color: #999;
            margin-left: 50rpx;
            justify-content: flex-start;
        }

        .right {
            color: #999;
            margin-right: 50rpx;
            justify-content: flex-end;
        }

    }

    .park-list {
        height: calc(100% - 30rpx);
        display: flex;
        flex-direction: column;
        align-items: center;

        .park-item {
            width: 100%;

            &:last-child {
                margin-bottom: 20rpx;
            }

            .van-radio {
                display: block;
            }
        }
    }
}

// 园区弹窗切换结束

// 空间切换弹窗开始
.space-box {
    height: 100%;
    width: 100%;
    color: #747474;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent
    }

    .space-header {
        height: 8vh;
        width: 680rpx;
        font-size: 32rpx;
        color: #7367f0;
        padding: 0 35rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 1rpx 1rpx 10rpx 0 #f2f2f2;
        z-index: 1;

        .space-close {
            color: #747474;
        }
    }

    .space-content {
        width: 100vw;
        display: flex;

        .left,
        .middle,
        .right {
            width: 250rpx;
            font-size: 30rpx;
            background-color: #f5f5f5;

            .list {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .item {
                    position: relative;
                    height: 100rpx;
                    width: 100%;
                    border-bottom: 1rpx solid #f2f2f2;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .txt {
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        line-height: 100rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 20rpx;
                    }

                    .txt1 {
                        color: #7367f0;
                        background-color: #f9f9f9;
                    }

                    .right-divider {
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 8rpx;
                        height: 100rpx;
                        background-color: #7367f0;
                    }
                }
            }
        }

        .middle {
            background-color: #fff;

            .list {
                .item {
                    .txt1 {
                        color: #7367f0;
                        background-color: #fafafa;
                    }
                }
            }
        }

        .middle-bg {
            background-color: #fafafa;
        }

        .right {
            background-color: #fff;

            .list {
                .item {
                    .txt1 {
                        color: #7367f0;
                        background-color: #fefefe;
                    }
                }
            }

        }

        .active-space {
            width: 450rpx;
        }
    }

    .empty {
        height: 44vh;
    }

    .space-footer {
        height: 8vh;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
            width: 700rpx;
            height: 6vh;
            border-radius: 15rpx;
            font-size: 32rpx;
        }
    }
}

// 空间切换弹窗结束

// 筛选弹窗开始
.search-box {
    height: 100%;
    width: 100%;
    color: #747474;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .search-header {
        height: 8vh;
        width: 680rpx;
        font-size: 32rpx;
        padding: 0 35rpx;
        color: #7367f0;
        background-color: #fff;
        border-bottom: 2rpx solid #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 1rpx 1rpx 10rpx 0 #f2f2f2;
        z-index: 1;

        .search-close {
            color: #747474;
        }
    }

    .search-content {
        // height: 40vh;
        height: calc(60vh - 8vh - 120rpx);
        width: 100%;
        overflow-y: scroll;

        .status {
            width: 100%;
            font-size: 28rpx;
            margin-top: 30rpx;
            padding-bottom: 30rpx;
            border-bottom: 1rpx solid #f2f2f2;

            .title {
                margin-left: 60rpx;
            }

            .name-box {
                margin-left: 50rpx;
                display: flex;
                flex-wrap: wrap;

                .name {
                    padding: 8rpx 35rpx;
                    margin-right: 30rpx;
                    margin-top: 20rpx;
                    border: 1rpx solid #999;
                    border-radius: 999rpx;
                }

                .active-type {
                    color: #fff;
                    border: 1rpx solid #7367f0;
                    background-color: #7367f0;
                }
            }
        }
    }

    .search-footer {
        height: 120rpx;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn,
        .btn1 {
            width: 260rpx;
            height: 70rpx;
            line-height: 70rpx;
            border-radius: 15rpx;
            font-size: 32rpx;
        }

        .btn1 {
            margin-left: 50rpx;
        }
    }
}

// 筛选弹窗结束